<template>
    <div id="app">
        <input v-model="searchStr" id="input_search" placeholder="用户名/姓名/职位">
        <div id="content">
            <div class="item" v-for="item in list.filter(item => {return !item.userName || item.userName.includes(searchStr) || !item.employeeId || item.employeeId.includes(searchStr) || !item.roleName || item.roleName.includes(searchStr) })">
                <div>{{item.employeeId}}</div>
                <div>{{item.userName}}</div>
                <div>{{item.roleName}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data(){
            return {
                searchStr: '',
                list: []
            }
        },
        mounted(){
            this.http_listAllUsers()
        },
        methods: {
            http_listAllUsers(){
                this.$axios.post('http://168.168.2.22:9091/sacn/user/findBy',
                    {
                        pageNum: "1",
                        pageSize: "1500"
                    }
                ).then(res => {
                    console.log('数据是:', res);
                    let arr0 = []
                    let arr1 = []
                    // 标记常用账户
                    res.data.data.list.forEach(item =>{
                        if([
                            '卢国旺',
                            '薛园园',
                            '王露雅',
                            '暴雪',
                            '于瑾',
                            '杨莹',
                            '张洁',
                            '郭春莺',
                            '何吉',
                            '饶迪',
                            '杨正锋',
                            '高宝珍',
                            '乐露',
                            '张敏',
                            '翟玲玲',
                            '沈浩',
                            '金祁',
                            '徐志仁',
                        ].includes(item.userName)){
                            console.log(1)
                            item.flag = 1
                            arr0.push(item)
                        }else{
                            item.flag = 0
                            arr1.push(item)
                        }
                    })
                    this.list = [...arr0, ...arr1]
                }).catch((e) => {
                    console.log('获取数据失败');
                });
            }
        }
    }
</script>
<style scoped>
    #app {
        width: 250px;
        max-height: 405px;
        height: 405px;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        /*background: #f5f5f5;*/
        display: flex;
        flex-direction: column;
        font-size: 1.2em;
    }
    #input_search{
        /*position: fixed;
        width: 250px;*/
    }
    #content{
        /*margin-top: 30px;*/
        overflow-y: scroll;
    }
    .item{
        padding: 10px 0;
        border-bottom: 2px dashed #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>
